<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>UI组件之弹出层</title>
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }
    body{
      height: 4000px;
    }
    header{
      width: 100%;
      height: 60px;
      background-color: #007d60;
    }
    .login{
      font-size: 14px;
      color: #fff;
      line-height: 60px;
      margin-left: 80px;
    }
    .mask{
      display: none;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      background-color: #efefef;
      opacity: .50;
      z-index: 99;
    }
    .tips{
       display: none;
      width: 400px;
      height: 200px;
      position: fixed;
      top: 50%;
      left: 50%;
      margin-left: -200px;
      margin-top: -100px;
      background-color: #fff;
      z-index: 100;
    }
    .close{
      position: absolute;
      top: 0;
      right: 0;
      width: 24px;
      height: 24px;
      font-size: 24px;
      text-align: center;
      line-height: 24px;
      color: #007d60;
      border: 1px solid #007d60;
      margin: 5px;
    }
  </style>
  <script src="js/jquery-1.11.3.js"></script>
</head>
<body>

  <div class="conatiner">
      <header>
         <div class="login">登录</div>  
      </header>
  </div>
  
  <div class="mask"></div>
  <div class="tips">
    <div class="close">X</div>
  </div>
  <script type="text/javascript">
    $(document).ready(function(){
      var height = $(document.body).height();
      console.log(height);

      $('.login').bind('click',function(){
        $('.mask').show();
        $('.tips').show();
        $('.mask').css('height',height);
      });

      $('.close').bind('click',function(){
        $('.mask').hide();
        $('.tips').hide();
      })
    });
  </script>
</body>
</html>